<template>
	<view class="page pageBg">
		<v-header title="合同信息" @click-left="$back()"></v-header>
		<view class="layout" :style="{ marginTop: h + 'px' }">
			<!--提示-->
			<view class="tipCont f fs">
				<text class="cuIcon-infofill"></text>
				<text>如需了解更多详情，请登录www.bbi.com.cn</text>
			</view>

			<!--搜索-->
			<view class="searchCont  f fb">
				<view class="cell f fs">
					<label>类型:</label>
					<view class=" f fl borInput">
						<picker @change="selectChange($event, 'cate')" class=" fl " :value="cateIndex" :range="cateArray" range-key="value">
							<input :value="cateArray[cateIndex].value" disabled placeholder="请选择合同类型" class="disInput" />
						</picker>
						<text class="cuIcon-unfold"></text>
					</view>
				</view>
				<view class="cell f fs">
					<label>状态:</label>
					<view class=" f fl borInput">
						<picker @change="selectChange($event, 'status')" class=" fl " :value="statuIndex" :range="statuArray" range-key="value">
							<input :value="statuArray[statuIndex].value" disabled placeholder="请选择状态" class="disInput" />
						</picker>
						<text class="cuIcon-unfold"></text>
					</view>
				</view>
			</view>
			<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :show-seconds="true" @confirm="onSelected" @cancel="onCancel" />
			<!--列表-->
			<scroll-view v-if="list.length > 0" scroll-y @scrolltolower="getList(0)" class="lineh1">
				<view class="list-cell" v-for="(item, index) in list" :key="index" @click="toMessageDetail">
					<view class="title f fb">
						<view class="f fl">
							<view class="oneLine titleC">合同信息</view>
						</view>
						<view class="statusBtn f fc">已生效</view>
					</view>
					<view class="cont">
						<view class="status">
							<label>合同编号:</label>
							R20201220-2
						</view>
						<view class="status">
							<label>企业名称:</label>
							北京文化科技有限公司
						</view>
						<view class="status">
							<label>合同金额:</label>
							100000元
						</view>
						<view class="status">
							<label>合同开始日期:</label>
							2021-1-1
						</view>
						<view class="status f ">
							<label>操作:</label>
							<view class="viewBtn f fc">查看</view>
						</view>
					</view>
				</view>
				<view style="padding-bottom: 20px;"><load-more :loadingType="loadingType"></load-more></view>
			</scroll-view>
			<view v-else class="f fc fn nodata">
				<view class="img"></view>
				<view class="text">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
import loadMore from '@/components/uni-load-more.vue';
export default {
	components: {
		loadMore,
		MxDatePicker
	},
	data() {
		return {
			loadingType: 0, // 0 还有数据可以加载  , 1 重新加载， 2 没有更多了
			h: this.$h,
			list: [
				{
					id: 1
				},
				{
					id: 2
				},
				{
					id: 3
				}
			],
			//合同类型
			cateIndex: -1,
			cateArray: [
				{
					code: 0,
					value: '企业入孵'
				},
				{
					code: 1,
					value: '法律服务合同'
				}
			],
			//合同状态
			statuIndex: -1,
			statuArray: [
				{
					code: 0,
					value: '已生效'
				},
				{
					code: 1,
					value: '未生效'
				}
			]
		};
	},
	methods: {
		//去合同详情
		toMessageDetail() {
			uni.navigateTo({
				url: './contractDetail'
			});
		},
		//筛选条件
		selectChange(e, type) {
			let than = this;
			let index = e.target.value;
			if (type == 'status') {
				//隐患状态
				if (index >= 0) {
					than.statuIndex = index;
				}
			} else if (type == 'cate') {
				//隐患状态
				if (index >= 0) {
					than.cateIndex = index;
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/style/approval.scss';
.statusBtn {
	color: $color3;
	width: 120rpx;
	flex-shrink: 0;
}
.titleC {
	width: 480rpx;
}
.viewBtn {
	width: 160rpx;
	height: 60rpx;
	border-radius: 15rpx;
	font-size: 32rpx;
	font-family: Microsoft YaHei;
	font-weight: 400;

	background: #51b067;
	color: #fff;
	flex-shrink: 0;
}
.lineh1 {
	width: 100%;
	height: calc(100% - 315rpx);
	// border: 1px solid #f00;
	box-sizing: border-box;
}
</style>
